<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css" type="text/css" />

<script type='text/javascript' src='/js/jqwidgets/jqxcore.js'></script>
<script type="text/javascript" src="/js/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="/js/jqwidgets/globalization/jquery.global.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxcalendar.js"></script> 

<h1>Calendar</h1>
<div id='content'>
  <script type="text/javascript">
      $(document).ready(function () {
      
          // Create the jqxDateTimeInput.
          $("#jqxDateTimeInput").jqxDateTimeInput({ width: '250px', height: '25px'});
          // restrict the navigation by setting minimum and maximum navigation dates.
          $("#jqxDateTimeInput").jqxDateTimeInput('setMinDate', new Date(2010, 0, 1));
          $("#jqxDateTimeInput").jqxDateTimeInput('setMaxDate', new Date(2013, 0, 1));
      });
  </script>  
  <div style='float: left' id='jqxWidget'>
    <div style='text-align: center; width: 250px; font-family: "Verdana", "sans-serif"; font-size: 13px;'>The navigation is restricted from 01/01/2010 to 01/01/2013</div>
    <br />
    <div id='jqxDateTimeInput'></div>
  </div>
</div>